<!-- Partie de index.php rajoutée en haut de intro.php pour essayer de debugger les appels ajax-->
<?php
$userInput = isset($_POST['userInput'])?$_POST['userInput']:$userInput;
$userInput = nl2br(stripslashes(strip_tags($userInput)));

$lang = isset($_GET['lang'])?$_GET['lang']:'FR';
$lang = ($lang == 'FR' || $lang == 'EN')?$lang:'FR';

?>
<!-- Fin partie rajoutée en haut-->
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="./css/jquery.mobile-1.0.css" />
  
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Vincent Volckaert" />
	<meta name="robots" content="all" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" /> 

    <?php if ($lang=='FR'): ?>
	   <title>changerTout</title>
	<?php else: ?>
		<title>changeEverything</title>
	<?php endif; ?>


<!-- Partie de intro.php déplacée au dessus de la liste de balises scripts qui suit pour essayer de debugger les appels ajax-->
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23611711-2']);
		_gaq.push(['_setDomainName', '.changertout.fr']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
<!-- Fin partie déplacée en haut-->

	<script>
		var lang = '<?php echo $lang; ?>';
		var userInput = '<?php echo $userInput; ?>';
    </script>
	
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>
	<script type="text/javascript" src="js/jquery.loader3.js"></script>
	<script type="text/javascript" src="js/buzz.js"></script>
	<script type="text/javascript" src="js/changerTout.js"></script>
	
	<script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script>
	<script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script>
</head>

<body>
	<style type="text/css" media="all">		
		html { width: 100%; height: 100%;}
		body { width: 100%; height: 100%;}
		
		#bas {
			align: center;
			bottom: 0;
			position: absolute;
			width: 90%;
			margin: 0 auto
		}
		
		.bigText { font-size: 20px; }
		#mainPhrase { -moz-user-select: none; -webkit-user-select: none; width: 95%; margin-left:5%; line-height: 1em;}	
		.derive { width: 95%; margin-left:5%; float: left; line-height: 1em;}	
		#mainPhrase span.loading { background: url('loading.gif') center center no-repeat; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}
		
		ul#ul { list-style-type: none; -moz-user-select: none; -webkit-user-select: none; -moz-border-radius: 10px; border-radius: 10px; background: #000000; color:white; position:absolute; padding: 10px; filter:alpha(opacity=50);-moz-opacity:0.8;opacity: 0.8;}
		ul#ul li { font-size:100%; filter:alpha(opacity=50);-moz-opacity:0.8;opacity: 0.8; }
		ul#ul li.li-selected { font-size:120%; cursor: pointer; filter:alpha(opacity=50);-moz-opacity:1;opacity: 1; }
		
		#userInput {
			padding : 2%;
			margin : 3%;
			width: 90%;
			border-bottom: 1px solid #DDDDDD;
		}
		
		#sound {
			position : absolute;
		}
		
		#help {
			position : absolute;  
			bottom: 0px;
			left: 0px;
		}
		
		#tutoriel {
			width: 100%;
		}
		
		#tutorielContent {
			font-size: 15px;
		}
	</style>
	

	<div data-role="page" id="index" data-theme="c">
		<!-- ligne rajotué de index.php (ancienne version) pour essayer de debugger les appels ajax -->
		<body onselectstart="return false">
		<!-- ligne rajoutée fin -->

		<div data-role="content" id="container" data-theme="c">
			<div id="cloud" class="bigText">
				<div id="cloud6"> <!--DIV1--> </div>
				<div id="cloud5"> <!--DIV2--> </div>
				<div id="cloud4"> <!--DIV3--> </div>
				<div id="cloud3"> <!--DIV4--> </div>
				<div id="cloud2"> <!--DIV5--> </div>
				<div id="cloud1"> <!--DIV6--> </div>  
			</div>
			
			<div id="mainPhrase" class="bigText"></div> <!-- la classe bigText fait que "MAIN PHRASE" ne s'affiche pas -->
			<div id="fadingWord" class="bigText"></div>
			<div id="trace" class="bigText"></div>
			<img id="sound" src="./sound.png"></img>
			<a href="tutoriel"><img id="help" src="./help.png"></img></a>
		</div> <!-- fin content -->	
		<div id="selector"></div>
	</div>
	
	<div data-role="page" id="input" data-theme="c">
		<div data-role="fieldcontain">
			<fieldset class="ui-grid-a">
				<div class="ui-block-a" id="inputSpace">
				</div>
				<div class="ui-block-b">
					<fieldset class="ui-grid-b">
						<div class="ui-block-a">
							<button type="submit" data-theme="c" id="userInputSubmit" name="submit" value="submit-value">
								Changer !
							</button>
						</div>
					</fieldset>
				</div>
			</fieldset>
		</div>
	</div>
	
	<?php include "tutoriel.php";?>
	
	<script type="text/javascript">
		var nbrParties = 5;
		var idPartie = 0;
		
		for (i = 1; i < nbrParties; i++)
		{
			$('#partie'+i).hide();
		}
		$('body').disableSelection();
		
		$('#parties').swipeleft(function() {
			$('#partie'+idPartie).hide("slide", { direction: "left" }, 1000, function(){
				$('#partie'+((idPartie + 1) % nbrParties)).show("slide", { direction: "right" }, 1000);
				idPartie = ((idPartie + 1) % nbrParties);
			});
		});
		$('#parties').swiperight(function() {
			if (idPartie != 0)
			{
				$('#partie'+idPartie).hide("slide", { direction: "right" }, 1000, function(){
					$('#partie'+((idPartie - 1) % nbrParties)).show("slide", { direction: "left" }, 1000);
					idPartie = ((idPartie - 1) % nbrParties);
				});
			}
		});
	</script>
			
	<script type="text/javascript">
		var lastShake = (new Date()).getTime();
		var temp = true;
		
		/*CETTE PARTIE DU CODE ETAIT EN COMMENTAIRE, JE L'AI REMISE POUR VOIR CE QU'ELLE FAIT, NE COMPRENDS TOUJOURS PAS TRES BIEN... [PIERRE]*/
		 $('#index').ready(function(event) {
			 var lang = '<?php echo $lang; ?>';			 
			 var userInput = '<?php echo $userInput; ?>';
			 $('body').disableSelection();
		 });
		 
		 (function () {
			if (typeof window.DeviceMotionEvent != 'undefined') {
				// Shake sensitivity (a lower number is more)
				var sensitivity = 10;

				// Position variables
				var x1 = 0, y1 = 0, z1 = 0, x2 = 0, y2 = 0, z2 = 0;

				// Listen to motion events and update the position 
				window.addEventListener('devicemotion', function (e) {
					x1 = e.accelerationIncludingGravity.x;
					y1 = e.accelerationIncludingGravity.y;
					z1 = e.accelerationIncludingGravity.z;
				}, false);

				// Periodically check the position and fire
				// if the change is greater than the sensitivity 
				setInterval(function () {	
					var change = Math.abs(x1 - x2 + y1 - y2 + z1 - z2);
					
					if ((change > sensitivity) && (((new Date()).getTime() - lastShake) > 1000)) {
						lastShake = (new Date()).getTime();
						changerPhrase();
						lastShake = (new Date()).getTime();
					}

					// Update new position
					x2 = x1;
					y2 = y1;
					z2 = z1;
				}, 150);
			}	
		}());
	</script>
</body>
</html>
